<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="12" :offset="17">
				<el-input style="width: 18.7rem;margin: 0 0.5rem 0.5rem 0;" clearable suffix-icon="el-icon-search" v-model="queryParams.content" placeholder="请输入内容"></el-input>
				<el-button class="bgc2f6 cfff" @click="seach">搜索</el-button>
			</el-col>
		</el-row>
		<div class="w100 p1 h65 bgcfff bsbb" style="border: #e6e6e6 1px solid; border-radius: 8px;">
			<div style="height: 60rem;overflow-y:auto;"  v-loading="loading" element-loading-text="拼命加载中">
				<el-table :data="tableData" height="100%" style="width: 100%;">
					<el-table-column fixed prop="number" label="钻孔编号" show-overflow-tooltip align="center">
						<template slot-scope="scope">
							<span style="color: #2f6bbb; cursor: pointer;">{{ scope.row.number }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="drill_type" label="钻孔类型" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="minerals" label="主要矿种" align="center"></el-table-column>
					<el-table-column prop="city" label="钻孔柱状图" align="center">
						<template slot-scope="scope">
							<span style="color: #2f6bbb; cursor: pointer;" @click="browse(scope.row.image)">浏览</span>
						</template>
					</el-table-column>
					<el-table-column prop="name" label="工作区名称" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="entry_name" label="项目名称" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="construction_unit" label="保管单位名称" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column fixed="right" label="操作" align="center" width="100">
						<template slot-scope="scope">
							<el-button type="text" size="small" icon="el-icon-view" @click="details(scope.row.id)">查看详情</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="tar mt05">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:page-sizes="[15, 30, 45, 60]"
					:page-size="queryParams.pageSize"
					background
					layout="total, sizes, prev, pager, next, jumper"
					:total="count"
				></el-pagination>
			</div>
		</div>
		<!-- 查看大图 -->
		<dialogImg :lookImg="lookImg" :biggerImg="biggerImg" @handleClose="handleClose" v-if="biggerImg"></dialogImg>
	</div>
</template>

<script>
import dialogImg from '@/components/dialogImg.vue'; 
import { drillList } from '@/api/resourceCenter.js';
import { getItem } from '@/utils/storage.js';
import noData from '@/assets/noData.jpg';
export default {
	name: 'oceanArticle',
	components: {
		dialogImg
	},
	data() {
		return {
			biggerImg: false,
			loading: false,
			lookImg: '',
			count:null,
			input: null,
			tableData: [],
			queryParams: {
				pageSize: 15,
				page: 1,
				type: 3,
				content: null,
				token: getItem('token')
			}
		};
	},
	created() {
		this.getList();
	},
	methods: {
		getList() {
			this.loading = true;
			drillList(this.queryParams).then(res => {
				this.loading = false;
				this.tableData = res.data.arr;
				this.count = res.data.count;
			});
		},
		browse(val) {
			if (val == null) {
				this.lookImg = noData;
			} else {
				this.lookImg = val;
			}
			// this.lookImg = val.image;
			this.biggerImg = true;
		},
		handleClose(val) {
			this.biggerImg = val;
		},
		//详情
		details(val) {
			this.$router.push({
				path: '/articleDetail',
				query: {
					id: val
				}
			});
		},
		handleSizeChange(val) {
			this.queryParams.pageSize = val;
			this.getList();
		},
		handleCurrentChange(val) {
			this.queryParams.page = val;
			this.getList();
		},
		seach(){
			this.getList();
		}
	}
};
</script>

<style scoped lang="scss">
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
	background-color: #2f6bbb;
}
</style>
